const width = window.innerWidth
const height = window.innerHeight

// 场景 - 所有物体的容器
// 场景只有一种
const scene = new THREE.Scene()

// 相机 - 决定了场景中那个角度的景色会显示出来
// 相机有很多种
// 透视相机（THREE.PerspectiveCamera）
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)

// 渲染器 - 决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制
const renderer = new THREE.WebGLRenderer()
// 设置渲染器的大小为窗口的内宽度，也就是内容区的宽度
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

// 几何体 - 正方体或者长方体
const geometry = new THREE.CubeGeometry(1, 1, 1)

// 是一种非常基本的材质，不考虑光照效果，只显示固定颜色或纹理
const material = new THREE.MeshBasicMaterial({ color: 'blue', wireframe: true })

// 用于创建和表示 3D 场景中的网格对象
// 网格对象是由几何体（geometry）和材质（material）组成的，它定义了物体的形状和外观
const cube = new THREE.Mesh(geometry, material)

// 控制网格对象的旋转、位置及缩放
// cube.rotation.x = 1
// cube.rotation.y = 10
camera.position.z = 5
cube.scale.set(2, 2, 2)

// 添加物体到场景中
scene.add(cube)

// 使用渲染器，结合相机和场景来得到结果画面
// renderer.render(scene, camera)

function render() {
  cube.rotation.x += 0.01
  cube.rotation.y += 0.01
  renderer.render(scene, camera)
  requestAnimationFrame(render)
}

render()